<!DOCTYPE HTML>
<html>
<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>首页frm页面</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/home-main.css">
		<style>
				.iconsousuo1{color:#ff4c41 !important;padding:0 5px 0 5px;font-size:0.42rem !important;}
		</style>
</head>
<body>
		<div id="app">
				<div class="header aui-active" id="aui-header-home">
						<div class="homeSearchBox" tapmode onclick="openSearch()">
						    <div class="homeSearchBoxleft">
				        		<span class="keyword"><span class="iconfont iconsousuo1"></span>复制淘宝商品链接 领优惠券再补贴</span>
						    </div>
						    <div class="homeSearchBoxright">搜券</div>
						</div>
				</div>
				<div class="headerBox">
        		<div class="headerTop">
             		<div class="seachBox" tapmode onclick="openSearch()">
                		<div class="seachBoxleft">
                      	<span><span class="iconfont iconsousuo1"></span>复制淘宝商品链接 领优惠券再补贴</span>
                  	</div>
                  	<div class="seachBoxright" >
                      	<span>搜券</span>
                  	</div>
             		</div>
						 		<div class="coursebg">
										<div class="box1">
												<div>三步省钱</div>
												<div class="jiaocheng" tapmode onclick="courseFun()">省钱教程
														<span style="padding:0 0.1rem;" class="iconfont iconqian"></span>
											 	</div>
								 		</div>
										<div class="box2">
									 			<span><img src="../../image/home/topicon1.png" alt="">&nbsp;&nbsp;打开淘宝</span>
									 			<span class="line"></span>
									 			<span><img src="../../image/home/topicon2.png" alt="">&nbsp;&nbsp;复制商品链接</span>
									 			<span class="line"></span>
									 			<span><img src="../../image/home/topicon3.png" alt="">&nbsp;&nbsp;打开省果</span>
										</div>
						 		</div>
         		</div>
				 		<div class="bodyBox">
					 			<!-- 专题 -->
								<div class="bodyBox1">
										<div v-for="item in activityData1" tapmode @click="toUrl(item)">
												<img :src=urlFun(item.pic_url) alt="">
												<p>{{item.title}}</p>
										</div>
								</div>
								<!-- 福利活动 -->
								<div class="bodyBox2">
										<div class="bodyBox2Banner" style="display:none">
												<div id='slider' class='swipe'>
														<div class='swipe-wrap'></div>
												</div>
										</div>
										<div class="bodyBox2Content"  style="display:none">
												<img class="activitybg" src="../../image/home/activitybg.png" alt="">
												<div class="activityBox" >
														<div class="activityItem" v-for="item in activityData2" tapmode @click="goWelfareFun(item)">
																<img :src=urlFun(item.pic_url) alt="">
																<span class="activityBtn">立即领取</span>
														</div>
												</div>
										</div>
								</div>
								<!-- 商品导航栏部分 -->
								<div class="goodsList" >
										<nav>
												<div class="nav-wrapper">
														<div class="nav-menu">
																<ul>
																		<li class="cidsIndex" :class="{'active':index==0}"
																		tapmode @click="changeTabFun(item.cid ,index)" v-for="(item,index) in classificationDate">{{item.name}}</li>
																</ul>
														</div>
														<img src="../../image/home/home_icon_allcategories.png" alt="" class="nav-wrap-img" onclick="goroot_index(1)">
												</div>
										</nav>
								</div>
								<div class="goodsListbox" v-cloak>
										<div class="goodsListItem" v-for="item in good_listData"  @click="openGoodsDeatilFun(item)">
												<div class="goodsListItemleft">
														<img :src='item.pict_url' alt="">
														<img class="iconbiaoqian" v-if="item.type == 2" src="../../image/specialPage/biaoqian.png" alt=""/>
												</div>
												<div class="goodsListItemright">
														<div class="goodsTitle">
																<img class="goodsTitleIcon"  v-if="item.user_type == 0"   src="../../image/goods/bill_icon_taobao.png" alt=""/>
																<img class="goodsTitleIcon" v-if="item.user_type == 1" src="../../image/goods/bill_icon_tmall.png" alt=""/>
																{{item.short_title != '' ? item.short_title :  item.title}}
														</div>
														<p class="shopName">{{item.shop_title}}</p>
														<div class="discountbox">
																<span>{{item.user_type == 1 ? '天猫' : '淘宝'}}价￥{{item.zk_final_price}}</span>
																<span>券{{item.coupon_amount}}元</span>
																<span>补贴{{item.per_price}}元</span>
														</div>
														<div class="goodsMsg">
																<span class="goodsPrice">到手价￥<span>{{item.end_price}}</span></span>
																<span class="volumeNum">已抢{{item.volume}}件</span>
														</div>
												</div>
										</div>
								</div>
						</div>
				</div>
		</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/swipe.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
(function (doc, win) {
		var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function () {
				var clientWidth = docEl.clientWidth;
				if (!clientWidth) {
						return;
				}
				docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
		};
		if(!doc.addEventListener){
				return
		};
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var app;
// var framesData = [];//打开商品分类对应页面的frm组
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
		var header = document.querySelector('#aui-header-home');
		$api.fixStatusBar(header);
		//监听页面上滑动距离弹出头部搜索框
		var topAreaHeight = 3.5 * getComputedStyle(window.document.documentElement)['font-size'].slice(0,-2) - 30;
		//监听页面上滑动距离固定商品分类
		var topAreaHeight2 = $api.dom(".headerTop").offsetHeight + $api.dom(".bodyBox1").offsetHeight + $api.dom(".bodyBox2").offsetHeight;
		window.onscroll = function() {
			  //为了保证兼容性，这里取两个值，哪个有值取哪一个
			  //scrollTop就是触发滚轮事件时滚轮的高度
			  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				//页面滑动到一定位置显示index页面搜索框，并让分类按钮条固定在顶部
				if(topAreaHeight <= scrollTop){
						document.querySelector('#aui-header-home').style.display = 'block';
				}else{
						document.querySelector('#aui-header-home').style.display = 'none';
				}
				if(topAreaHeight2 <= scrollTop){
						document.querySelector('.goodsList').className= "goodsList headertopStyle"
						if(api.systemType == 'ios'){
							document.querySelector('.headertopStyle').style.top = api.safeArea.top + 60 + "px"
						}else{
							// 页面滑动到一定位置固定商品分类tab导航栏
							var statusBar = api.require("statusBar");
							var statusBarHeight  = statusBar.getStatusBarHeight();
							document.querySelector('.headertopStyle').style.top = document.querySelector('#aui-header-home').offsetHeight + statusBarHeight + 'px';
						}
				}else{
						document.querySelector('.goodsList').className= "goodsList"
				}
		}
		api.addEventListener({
		    name: 'isShowFun'
		}, function(ret, err){
		    if( ret ){
		         isShowFun();
		    }else{
		    }
		});
		// 初始化数据
		initializeData();
		// 获取首页活动页面活动的内容 2
		getActivityData(2)
		//商品分类类型请求
		goodsCidFun()
		getdatalist()
		api.addEventListener({
		    name: 'RefreshFun'
		}, function(ret, err){
		    if( ret ){
						api.refreshHeaderLoading({});
		    }else{
		         console.log( JSON.stringify( err ) );
		    }
		});
		//下拉刷新数据
		api.setCustomRefreshHeaderInfo({
		    bgColor: '#ff4c41',
		    isScale: true,
				refreshHeaderHeight: 70,
				loadAnimInterval :40,
				image: {
						 pull: ['widget://image/loading/1.png','widget://image/loading/4.png',
								 'widget://image/loading/7.png','widget://image/loading/10.png',
								 'widget://image/loading/13.png','widget://image/loading/16.png',
								 'widget://image/loading/19.png','widget://image/loading/22.png',
								 'widget://image/loading/25.png','widget://image/loading/28.png',
								 'widget://image/loading/31.png','widget://image/loading/34.png',
								 'widget://image/loading/37.png','widget://image/loading/40.png'],
						 load: ['widget://image/loading/1.png','widget://image/loading/4.png',
								 'widget://image/loading/7.png','widget://image/loading/10.png',
								 'widget://image/loading/13.png','widget://image/loading/16.png',
								 'widget://image/loading/19.png','widget://image/loading/22.png',
								 'widget://image/loading/25.png','widget://image/loading/28.png',
								 'widget://image/loading/31.png','widget://image/loading/34.png',
								 'widget://image/loading/37.png','widget://image/loading/40.png']
				 }
		}, function() {
		    getdatalist()
				getActivityData(1)
				getActivityData(2)

		});
		//上拉加载新一页数据
		if (app.whetherToLoading == false) {
				api.addEventListener({
						name: 'scrolltobottom',
						extra: {
								threshold: 20 //设置距离底部多少距离时触发，默认值为0，数字类型
						}
				}, function(ret, err) {
						app.whetherToLoading = true;
						app.next_p++
						getdatalist();
				});
		}
}
// 初始化数据
function initializeData(){
		app = new Vue({
				el: '#app',
				data: {
						whetherToLoading:false,//页面是否在加载中
						activityData1:[],//首页专题活动数据
						activityData2:[],//首页福利活动书
						classificationDate:[], //商品列表分类数据
						good_listData:[],//商品列表数据
						cid:0,//请求商品数据类型
						next_p:1,//当前请求页面数
						num_p:20,//当前请求页每页条数

				}
		});
}
//判断是否展示轮播图片
function isShowFun(){
		if(api.getGlobalData({key: 'config_info'}).is_nav){
				getActivityData(1);
				document.querySelector('.bodyBox2Banner').style.display = 'block';
		}
		// 判断是否展示福利活动
		if(api.getGlobalData({key: 'config_info'}).is_newcomer){
				getActivityData(5)
				document.querySelector('.bodyBox2Content').style.display = 'block';
		}
}

//获取首页活动内容信息
function getActivityData(typeData){
		$api.ajax({
				url: 'api/article/list',
				method: 'get',
				data:{
						values:{
								type:typeData,
						}
				}
		}, function (ret, err) {
				if(ret){
						if(typeData == 2){ //专题活动
								app.activityData1 = ret.data.list;
						}else if (typeData == 5) {  //福利活动
								app.activityData2 = ret.data.list;
						}else if(typeData == 1){  //轮播图区域
								var htmlData = ''
								ret.data.list.forEach((item, value) => {
										htmlData += '<div class="swipe-box" tapmode onclick="toUrl(' + JSON.stringify(item).replace(/\"/g,"'") + ')"><img src="'+ $api.baseUrl + item.pic_url + '" ></div>'
								});
								$api.html($api.dom(".swipe-wrap"), htmlData);
								window.mySwipe = Swipe($api.byId('slider'), {
										auto: 3000,
										continuous: true,
										callback: function (index, elem) {}
								});

						}
				}else{
				}
		})
}
//轮播图链接跳转
function toUrl(val) {
		if(val.url_type == 0){ //跳转站内
				api.openTabLayout({
						name: val.name.name,
						url: val.name.url,
						useWKWebView: true,
						bgColor: '#fff'
				});
		}else if(val.url_type == 1){  //淘宝
				var aliBC = api.require("aliBC");
				aliBC.showPageByUrl({
						url: val.url,
						backUrl: api.systemType != "android" ? "" : "tbopen24627965"
				}, function (ret, err) { });
		}else if(val.url_type == 2){  //天猫q

		}else if(val.url_type == 3){  //拼多多
				var h5Url = encodeURIComponent(val.url);
				var backUrl = encodeURIComponent("yqlm://?from=pdd");
				if (api.systemType == "android") {
						location.href = "pddopen://?appKey=ca8913c1b218442ab23dccff04370e04&packageId=com.t419864334.jma&backUrl=" + backUrl + "&h5Url=" + h5Url;
						api.openApp({
								androidPkg:location.href ,
								mimeType: 'text/html',
								uri: location.href
						}, function(ret, err) {
								if (ret) {
										alert(JSON.stringify(ret));
								} else {
										alert(JSON.stringify(err));
								}
						});

				}else if (api.systemType == "ios") {
						var iospdd = "pddopen://?appKey=ca8913c1b218442ab23dccff04370e04&packageId=com.api.testapp20191025&backUrl=" + backUrl + "&h5Url=" + h5Url;
						location.href = iospdd;
						api.openApp({
								iosUrl: iospdd,
						}, function(ret, err) {
								if (ret) {

								} else {

								}
						});
				}
		}else if(val.url_type == 4){  //京东

		}
}
// 获取商品分类数据
function goodsCidFun(){
		$api.ajax({
				url: 'api/goods/cids',
				method: 'get',
		}, function (ret, err) {
				if(ret){
						app.classificationDate = ret.data.cids
						// 打开底部分类frm组的页面数组
						// framesData = [];
						// app.classificationDate.forEach((item, value) => {
						// 		let frame = {
						// 				name: 'selected',
						// 				url: "../main/selected.html",
						// 				bounces: true,
						// 				vScrollBarEnabled: false,
						// 				pageParam: {
						// 						cid:item.cid ,
						// 				},
						// 		}
						// 		framesData.push(frame)
						// })
						// // 打开首页商品分类的frm组页面
						// openFrameGroupFun(framesData)
				}
		})
}
// 获取商品列表详情的数据
function getdatalist(){
		$api.ajax({
			url: 'api/goods/list',
			method: 'get',
			data: {
					values: {
							cid: app.cid,
							next_p: app.next_p,
					}
			}
		}, function (ret, err) {
				api.refreshHeaderLoadDone()
				app.whetherToLoading = false;
				if (ret) {
							next_p = ret.data.next_p
							if(app.next_p == 1){
									app.good_listData = ret.data.list;
							}else{
									app.good_listData = app.good_listData.concat(ret.data.list)
							}
							api.parseTapmode();
				} else {
				}
		});
}
// 商品分类的切换
function changeTabFun(id,index){
		document.querySelector('.active').className= "cidsIndex"
		document.querySelectorAll('.cidsIndex')[index].className= "cidsIndex active";
		app.cid = id;
		app.next_p = 1;
		getdatalist()
}
// 跳转商品详情 后面根据商品页面类型来区分跳转商品详情页
function opendetail(item){
		api.openTabLayout({
				name: 'item',
				url: '../item.html',
				useWKWebView: true,
				bgColor: '#fff',
				pageParam: {
						item: item
				}
		});
}
// 打开首页商品分类frm组页面
// function openFrameGroupFun(framesData) {
// 		api.openFrameGroup({
// 				name: 'selected',
// 				scrollEnabled: true,
// 				rect: {
// 						x: 0,
// 						y: $api.dom('.headerTop').offsetHeight + $api.dom('.nav-wrapper').offsetHeight,
// 						w: 'auto',
// 						marginBottom:65,
// 				},
// 				index: 0,
// 				frames: framesData,
// 				preload: 1,
// 		}, function (ret, err) {
// 				let index_ = ret.index + 1
// 				if (index == ind) {
// 						setMenu($(".nav-menu li:nth-child(" + index_ + ")"));
// 				} else {
// 						ind = index;
// 				}
// 		});
// }
//跳转至首页分类页面
function goroot_index(index) {
    api.execScript({
        name: 'root',
        script: "openFrameFun('category','category_main','./html/category/main.html')"
    });
}
// 活动图片链接拼接
function urlFun(url){
		var url =  $api.baseUrl + url
		return url;
}
// 跳转观看省钱教程页面
function courseFun() {
    api.openTabLayout({
        name: 'course',
        url: '../home/course_win.html',
        useWKWebView: true,
        bgColor: '#fff',
    });
}
// 跳转搜索券页面
function openSearch(){
		api.openTabLayout({
				name: 'search',
				url: '../home/search_win.html',
				useWKWebView: true,
				bgColor: '#fff',
				allowEdit: true,
		});
}
// 福利活动页面跳转
function goWelfareFun(welfaredata){
		console.log(JSON.stringify(welfaredata))
}

</script>
</html>
